<template>
    <div class="main">
        <template v-if="item.small_images">
            <van-swipe class="huandeng" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item,index) in item.small_images.string" :key="index">
                    <img v-lazy="item+'_500x500'"/>
                </van-swipe-item>
            </van-swipe>
        </template>
        <div class="shangpinxinxi">
            <h3 :class="'iconfont biaoti usertype_'+item.user_type"> {{item.title}}</h3>
            <div class="quanorxiaoliang">
                <span class="youhuiquan"><span>券</span><b>{{item.coupon_amount}}元</b></span>
                <span class="xiaoliang">已售{{item.volume}}件</span>
            </div>
            <div class="quanhoujia">
                <span class="qh">券后<span>{{price(item.zk_final_price,item.coupon_amount)}}</span></span>
                <span class="yj">{{item.zk_final_price}}</span>
            </div>
        </div>
        <div class="footer-fixed">
            <button class="fenxiang" @click="showWenan = !showWenan">分享</button>
            <button class="kouling" @click="showToken = !showToken">口令购买</button>
        </div>
        <van-popup v-model="showToken">
            <div class="taokouling">
                <h3 class="biaoti">淘口令</h3>
                <input type="text" :value="item.token" ref="tkl" class="text">
                <button class="anniu" @click="copy('tkl')">一键复制</button>
                <p class="beizhu">（若复制失败，请长按文字手动复制）</p>
                <p class="help">复制"淘口令"后打开【手机淘宝】即可领取优惠券购买</p>
            </div>
        </van-popup>
        <van-popup v-model="showWenan">
            <div class="wenanfenxiang">
                <h3 class="biaoti">文案分享</h3>
                <textarea class="text" ref="wenan" rows="10">{{wenan}}</textarea>
                <button class="anniu" @click="copy('wenan')">一键复制</button>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import {Swipe, SwipeItem, Popup, Toast} from 'vant';

    export default {
        data() {
            return {
                item: {
                    token: null
                },
                showToken: false,
                showWenan: false
            }
        },
        components: {
            [Popup.name]: Popup,
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem,
            [Toast.name]: Toast
        },
        methods: {
            price(zk_price, ticket) {
                let result = zk_price - ticket;
                return result.toFixed(2);
            },
            getItem() {
                const store = sessionStorage.getItem(this.$route.params.id);
                this.item = Object.assign({}, this.item, JSON.parse(store));
                if (typeof this.item.small_images === 'undefined' || this.item.small_images.string.length <= 0) {
                    this.item.small_images = {
                        'string': new Array(this.item.pict_url)
                    }
                }
            },
            getToken() {
                this.$http.get(this.$store.api.token, {
                    params: {
                        text: this.item.title,
                        url: `https:${this.item.coupon_share_url}`
                    }
                }).then(result => this.item.token = result['data'])
            },
            copy(el) {
                this.$refs[el].select();
                if (document.execCommand('Copy')) {
                    Toast('复制成功');
                } else {
                    Toast('当前浏览器不支持一键复制功能，请长按内容手动复制');
                }
            }
        },
        computed: {
            wenan() {
                return this.item.title + '\n' +
                    `【在售价】${this.item.zk_final_price}元\n` +
                    `【券后价】${this.price(this.item.zk_final_price, this.item.coupon_amount)}元\n` +
                    `【淘口令】${this.item.token}\n` +
                    '--------------------\n' +
                    `复制这条信息，到【手机淘宝】即可领取优惠券。获取更多优惠券可访问：http://m.24tao.net`

            }
        },
        mounted() {
            this.getItem();
            try {
                this.getToken();
            } catch (e) {
                this.getToken();
            }
        }
    }
</script>
<style scoped>
    .huandeng {
        background: #fff;
        position: relative;
        height: calc(100vw * 3 / 4);
        text-align: center;
    }
    
    .shangpinxinxi {
        background: #fff;
        padding: 10px;
    }
    
    .shangpinxinxi .biaoti {
        height: 40px;
        line-height: 20px;
        overflow: hidden;
        font-size: 14px;
        display: block;
    }
    
    .shangpinxinxi .usertype_0::before {
        content: "\e600";
        font-size: 16px;
        color: #ff718b;
    }
    
    .shangpinxinxi .usertype_1::before {
        content: "\e632";
        font-size: 16px;
        color: #ff718b;
    }
    
    
    .shangpinxinxi .quanorxiaoliang {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        font-size: 12px;
    }
    
    .shangpinxinxi .quanorxiaoliang .youhuiquan {
        background: #ff718b;
        color: #ff718b;
        border: 1px #ff718b solid;
        border-radius: 3px;
        display: flex;
        align-items: center;
    }
    
    .shangpinxinxi .quanorxiaoliang .youhuiquan span {
        color: #fff;
        padding: 0 2px;
    }
    
    .shangpinxinxi .quanorxiaoliang .youhuiquan b {
        padding: 0 2px;
        background: #fff
    }
    
    .shangpinxinxi .quanorxiaoliang .xiaoliang {
        color: #999;
    }
    
    .shangpinxinxi .quanhoujia {
        font-size: 12px;
        margin-top: 10px;
    }
    
    .shangpinxinxi .quanhoujia .qh {
        font-size: 10px;
        color: #999;
    }
    
    .shangpinxinxi .quanhoujia .qh span {
        font-weight: bold;
        font-size: 14px;
        color: #333;
        margin: 0 5px;
    }
    
    .shangpinxinxi .quanhoujia .qh span::before {
        content: '¥';
        padding-right: 2px;
        font-size: 10px;
    }
    
    .shangpinxinxi .quanhoujia .yj {
        font-size: 10px;
        color: #999;
        position: relative;
    }
    
    .shangpinxinxi .quanhoujia .yj::before {
        content: '¥';
    }
    
    .shangpinxinxi .quanhoujia .yj::after {
        content: '';
        background: #999;
        height: 1px;
        width: 100%;
        top: 50%;
        left: 0;
        position: absolute;
    }
    
    .footer-fixed {
        display: flex;
        flex-direction: row;
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        height: 50px;
        text-align: center;
        justify-content: space-between;
    }
    
    .footer-fixed .kouling,
    .footer-fixed .fenxiang {
        line-height: 50px;
        font-size: 16px;
        border: 0;
        padding: 0;
        flex: 1;
        border-radius: 0;
        position: static;
        cursor: pointer;
    }
    
    .footer-fixed .fenxiang {
        background: #fff;
    }
    
    .footer-fixed .kouling {
        background: #ff718b;
        color: #fff;
    }
    
    .taokouling,
    .wenanfenxiang{
        display: flex;
        flex-direction: column;
        background: #fff;
        padding: 20px;
        border-radius: 3px;
        box-shadow: 1px 0 4px #ccc;
    }
    
    .taokouling .biaoti,
    .wenanfenxiang .biaoti{
        display: block;
        text-align: center;
        margin-bottom: 15px;
        font-size: 16px;
    }
    
    .taokouling .text {
        border: 1px #ff718b dashed;
        padding: 20px;
        font-size: 16px;
        background: #fff;
        color: #333;
        font-weight: 700;
        text-align: center;
    }
    .wenanfenxiang .text{
        border: 1px #ff718b dashed;
        padding: 10px;
        font-size: 14px;
        background: #fff;
        color: #333;
    }

    .taokouling .anniu,
    .wenanfenxiang .anniu{
        padding: 10px 20px;
        background: #ff718b;
        color: #fff;
        font-size: 14px;
        border-radius: 3px;
        border: 0;
        margin-top: 10px;
        cursor: pointer;
        line-height: 22px;
    }
    
    .taokouling .anniu:hover {
        opacity: .8;
        background: #e71a3f;
    }
    
    .taokouling .beizhu {
        font-size: 14px;
        color: #666;
        text-align: center;
        line-height: 24px;
        margin-top: 10px;
    }
    
    .taokouling .help {
        margin-top: 10px;
        font-size: 14px;
        color: #333;
        line-height: 22px;
    }
    
    .van-popup {
        width: 90%;
    }
</style>